﻿<%@ Page Title="Request Form Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="RequestForm.aspx.cs" Inherits="StampController.Pages.RequestForm" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <%= WebExtensions.CombresLink("uploadCss") %>
    <%= WebExtensions.CombresLink("knockoutJs") %>
    <%= WebExtensions.CombresLink("uploadJs") %>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div class="form">
        <header><h2>GD'S Signature and Company Stamp 
                    Request Form</h2>
                    <input type="hidden" id="hidRequestId"/>
                    <input type="hidden" id="hidAssignedTo"/>
            </header>
        <%--<div class="four-cols">
            <asp:Label runat="server" AssociatedControlID="txtDepartment" Text="Department:"></asp:Label>
            <div>
                <asp:TextBox ID="txtDepartment" CssClass="deptName" ReadOnly="True" runat="server"></asp:TextBox>
            </div>
            <asp:Label ID="Label1" runat="server" AssociatedControlID="txtDateOfApp" Text="Date of Application:"></asp:Label>
            <div>
                <asp:TextBox ID="txtDateOfApp" CssClass="dateOfApp" ReadOnly="True" runat="server"></asp:TextBox>
            </div>
        </div>--%>
        <div style="font-size:8pt; color: #FF0000; font-family: Tahoma, Arial, Helvetica, sans-serif; font-weight:normal">
            <table>
                <tr>
                    <td>
                        <div>
                            <label id="Notice">
                                * Category: In list: Just HOD approve / Not in list: Need GD's approval (don't select anything)<br/>
                                * Upload file: optional field with maximum file size: 10MB; Accept file formats: *.pdf, *.xls, *.xlsx, *.doc, *.docx 
                                * (*) is required fields
                            </label>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <div class="four-cols">
            <asp:Label ID="Label3" runat="server" AssociatedControlID="ddlRequestFor" Text="Request for:"></asp:Label>
            <div>
                <asp:DropDownList ID="ddlRequestFor" CssClass="requestFor" runat="server"></asp:DropDownList>
            </div>
            <asp:Label ID="Label4" runat="server" AssociatedControlID="ddlCategory" Text="Category:"></asp:Label>
            <div>
                <asp:DropDownList ID="ddlCategory" CssClass="category" runat="server"></asp:DropDownList>
            </div>          
        </div>
        <div class="four-cols">
            <label id="Label2" for="neededDate">
                Needed date <span style="color: red">(*)</span>:</label>
            <div>
                <input id="neededDate" class="needed-date datepicker" />
            </div>
            <label id="lblrequestType" for="lblrequestType">
                Request type:
            </label>
            <div>
                <asp:DropDownList ID="ddlRequestType" CssClass="requestType" runat="server"></asp:DropDownList>
            </div>
        </div>
        <div>
            <label for="purposeOfDoc">
                Purpose of the document <span style="color: red">(*)</span>:</label>
            <div>
                <textarea id="purposeOfDoc" name="purposeOfDoc" cols="5" rows="3" spellcheck="true"></textarea>
            </div>
        </div>
        <div>
            <label for="remark">
                Pages and copies:</label>
            <div>
            <table>
                <tr>
                    <td>
                        <input id="numPages" value="1" />
                    </td>
                    <td>
                        <label for="lblpages">pages  </label>
                    </td>
                    <td>
                        <input id="numCopies" value="1" />
                    </td>
                    <td>
                        <label for="lblcopies">copies</label>
                    </td>
                </tr>
            </table>                
            </div>
        </div>       
       <%-- <div>
            <fieldset>
                <legend><span style="color: blueviolet">Request type: </span></legend>
                <div class="requestType">
                    <div>
                        <input id="requestType01" name="requestType" type="radio" value="1" tabindex="5" checked="checked" />
                        <label class="choice" for="requestType01">
                            Normal</label>
                    </div>
                    <div>
                        <input id="requestType02" name="requestType" type="radio" value="2" tabindex="6" />
                        <label class="choice" for="requestType02">
                            <b style="color: red">Urgent</b></label>
                    </div>
                </div>
            </fieldset>
        </div>--%>
        <div>
            <fieldset>
                <legend>Document required by: </legend>
                <div class="requiredBy">
                    <div>
                        <input id="requiredBy01" name="requiredBy" type="radio" value="1" tabindex="5" checked="checked" />
                        <span class="contain-define"><label class="choice" for="requiredBy01">
                            Authority</label><input id="defineName" type="text" value="" /></span>
                    </div>
                    <div>
                        <input id="requiredBy02" name="requiredBy" type="radio" value="2" tabindex="6" />
                        
                            <label class="choice" for="requiredBy02">
                                Customer</label>
                    </div>
                    <div>
                        <input id="requiredBy03" name="requiredBy" type="radio" value="3" tabindex="7" />
                        <label class="choice" for="requiredBy03">
                            Supplier</label>
                    </div>
                    <div>
                        <input id="requiredBy04" name="requiredBy" type="radio" value="4" tabindex="7" />
                        <label class="choice" for="requiredBy04">
                            Internal</label>
                    </div>
                </div>
            </fieldset>
        </div>
        <div>
            <fieldset>
                <legend>Sign by: </legend>
                <div class="signBy">
                    <input id="signBy" name="signBy" type="hidden" value="" />
                    <div>
                        <input id="signBy0" name="signBy" type="checkbox" value="1" tabindex="5" />
                        <label class="choice" for="signBy0">
                            General Director</label>
                    </div>
                    <div>
                        <input id="signBy1" name="signBy" type="checkbox" value="2" tabindex="6" />
                        <label class="choice" for="signBy1">
                            Head of department</label>
                    </div>
                </div>
            </fieldset>
        </div>
        <div>
            <fieldset>
                <legend>Kind of stamp: </legend>
                <div class="stamped">
                    <input id="stamped" name="stamped" type="hidden" value="" />
                    <div>
                        <input id="stamped0" name="stamped" type="radio" value="1" tabindex="5" checked="checked" />
                        <label class="choice" for="stamped0">
                            Company stamp</label>
                    </div>
                    <div>
                        <input id="stamped1" name="stamped" type="radio" value="2" tabindex="6" />
                        <label class="choice" for="stamped1">
                            Branch company stamp</label>
                    </div>
                </div>
            </fieldset>
        </div>
        <div>
            <fieldset>
                <legend>Stamped type </legend>
                <div class="stampedType">
                    <input id="stampedType" name="stampedType" type="hidden" value="" />
                    <div>
                        <input id="stampedType0" name="stampedType" type="checkbox" value="1" tabindex="7" class="only-one" />
                        <label class="choice" for="stampedType0">
                            Hanging stamp</label>
                    </div>
                    <div>
                        <input id="stampedType1" name="stampedType" type="checkbox" value="2" tabindex="7" class="only-one" />
                        <label class="choice" for="stampedType1">
                            Stamp on signature</label>
                    </div>
                    <div>
                        <input id="stampedType2" name="stampedType" type="checkbox" value="4" tabindex="7" />
                        <label class="choice" for="stampedType2">
                            Linking pages stamp</label>
                    </div>
                </div>
            </fieldset>
        </div>
        <div>
            <table>
                <thead>
                    <tr>
                        <th class="head-left">
                            Document attachments:
                        </th>
                        <th style="display: none">
                        </th>
                        <%--<th>
                            Pages
                        </th>
                        <th>
                            Copies
                        </th>--%>
                        <th>
                            .
                        </th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: documents, sortableList: documents">
                    <tr>
                        <td>
                            <a data-bind="attr: { href: name }"><span data-bind='text: originname'></span></a>
                        </td>
                        <td style="display: none">
                            <span data-bind='text: name'></span>
                        </td>
                        <%--<td class="col-right" style="width: 80px;">
                            <input type="number" min="1" max="5000" step="1" data-bind="value: pages" />
                        </td>
                        <td class="col-right" style="width: 80px;">
                            <input type="number" min="1" max="100" step="1" data-bind="value: copies" />
                        </td>--%>
                        <td class="col-right" style="width: 120px;">
                            <button data-bind="click: $parent.removeItem" class="button remove icon">
                                Remove item
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div>
            <input type='file' id='button-upload' multiple />
        </div>
        <div id='progress' class='progress'>
            <div class='progress-bar progress-bar-success'>
            </div>
        </div>
        
        <div>
            <label for="remark">
                Remark:</label>
            <div>
                <textarea id="remark" name="remark" cols="5" rows="3" spellcheck="true"></textarea>
            </div>
        </div>
        <div class="button-group">
            <a id="submit" class="button">Submit</a> <a id="reset" class="button">Reset</a>
        </div>
    </div>
</asp:Content>
